<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style>
        #table1 table {
            width: 100%;
            border-collapse: collapse;
        }

        #table1 table, #table1 td, #table1 th {
            border: 1px solid black;
        }

        #table2 table {
            border-collapse: collapse;
            width: 100%;
        }

        #table2 th, #table2 td {
            padding: 8px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }

        #table3 table {
            border-collapse: collapse;
            width: 100%;
        }

        #table3 th, #table3 td {
            padding: 8px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }

        #table3 tbody tr:nth-child(odd) {
            background-color: #f2f2f2;
        }


        #table4 table {
            border-collapse: collapse;
            width: 100%;
        }
        #table4 thead {
            background-color: #4caf50;
            color: white;
        }
        #table4 th, #table4 td {
            padding: 8px;
            text-align: center;
        }
        #table4 tbody tr:hover {
            background-color: #f2f2f2;
        }

    </style>
</head>
<body>
<div id="table1">
    <h4>The width and height Properties</h4>
    <table>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>Peter</td>
            <td>Griffin</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Lois</td>
            <td>Griffin</td>
            <td>$150</td>
        </tr>
        <tr>
            <td>Joe</td>
            <td>Swanson</td>
            <td>$300</td>
        </tr>
        <tr>
            <td>Cleveland</td>
            <td>Brown</td>
            <td>$250</td>
        </tr>
    </table>
</div>
<hr>

<div id="table2">
    <h4>Add the border-bottom property to
        <th> and
        <td> for horizontal dividers:
    </h4>
    <table>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>Peter</td>
            <td>Griffin</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Lois</td>
            <td>Griffin</td>
            <td>$150</td>
        </tr>
        <tr>
            <td>Joe</td>
            <td>Swanson</td>
            <td>$300</td>
        </tr>
        <tr>
            <td>Cleveland</td>
            <td>Brown</td>
            <td>$250</td>
        </tr>
    </table>
</div>
<hr>

<div id="table3">
    <h4>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table
        rows:</h4>
    <table>
        <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Savings</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Peter</td>
            <td>Griffin</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Lois</td>
            <td>Griffin</td>
            <td>$150</td>
        </tr>
        <tr>
            <td>Joe</td>
            <td>Swanson</td>
            <td>$300</td>
        </tr>
        <tr>
            <td>Cleveland</td>
            <td>Brown</td>
            <td>$250</td>
        </tr>
        </tbody>
    </table>
</div>
<hr>

<div id="table4">
    <h4>Use the :hover selector on
        <tr> to highlight table rows on mouse over:
    </h4>
    <table>
        <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Savings</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Peter</td>
            <td>Griffin</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Lois</td>
            <td>Griffin</td>
            <td>$150</td>
        </tr>
        <tr>
            <td>Joe</td>
            <td>Swanson</td>
            <td>$300</td>
        </tr>
        <tr>
            <td>Cleveland</td>
            <td>Brown</td>
            <td>$250</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>